<!--
 *用户列表组件,合并修改，添加使用的父组件
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2020-12-23 18:24:19
 * @LastEditTime: 2021-04-06 11:06:35
 * @FilePath: \小程序d:\课堂\课堂\个人\Vue\哇麦游戏后台\vue\1.vue全站管理系统\vue_shop\src\components\user\Users2.vue
-->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb> -->

    <SearchCommon @searchName="searchName"></SearchCommon>

    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加 clearable代表清空-->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"> </el-table-column>
        <el-table-column label="状态" prop="mg_state">
          <!-- 点击关闭、打卡的一个按钮 -->
          <template slot-scope="scope"
            ><!-- 作用域插槽 -->
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" size="mini" icon="el-icon-setting" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加用户的对方框 -->

    <!-- 修改用户的对话框 -->
    <usersInput :addDialogVisibleShow.sync="addDialogVisibleShow" :title="title" :editForm="editForm"></usersInput>
  </div>
</template>
<script>
import SearchCommon from '../common/SearchCommon2'
import usersInput from '@/components/user/usersInput'
import { getUsersData, addUsersData, getModifyUsersData, getUserStateChangedData } from '@/api/home'
export default {
  data() {
    return {
      queryInfo: {
        //需要发送给后端的参数，拿到用户列表
        query: '',
        pagenum: 1, //当前的页数
        pagesize: 2 //当前每页显示多少条数据
      },
      userlist: [], //保存用户列表数据
      total: 0, //用户条数
      addDialogVisibleShow: false, //控制添加用户对方框的显示与隐藏
      editDialogVisible: false, //控制修改用户对话框的显示与隐藏
      title: '', //根据这个显示修改还是添加弹框
      //查询的用户信息对象
      editForm: {}
    }
  },
  components: {
    usersInput,
    SearchCommon
  },

  created() {
    this.getUserList()
  },
  methods: {
    //获取用户列表数据
    async getUserList() {
      /*  let { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      }) */

    let params = { ...this.queryInfo } //解构获取data定义数据，作为参数传送
    
    let { data: res } = await getUsersData(params) //传参
    
      if (res.meta.status != 200) {
        return this.$message.error('获取用户列表失败')
      }
      if(this.queryInfo.query){
            this.$message.success("搜索成功-共："+res.data.users.length+"条")
      }
      this.userlist = res.data.users;
      this.total = res.data.total; //条数
      console.log(res);
    },
    //搜索事件
    searchName(val){
      console.log(val);
      this.queryInfo.query=val;
      this.getUserList()

    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    //监听 页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },

    //打开添加弹框
    addDialogVisible() {
      let titleText = '添加用户'
      this.addDialogVisibleShow = true
      this.title = titleText
    },

    //修改功能
    async showEditDialog(id) {
      let titleText = '修改用户'

      this.title = titleText
      //console.log(id)//获取到点击的id
      // const { data: res } = await this.$http.get(`users/${id}`)
      //封装api后面的写法
      const { data: res } = await getModifyUsersData(id)
      console.log(res)
      if (res.meta.status != 200) {
        return this.$message.error('没有查到数据')
      }
      this.editForm = res.data //保存到这个对象上
      console.log(this.editForm)
      this.addDialogVisibleShow = true
    },
    //监听switch开关的状态
    async userStateChanged(userinfo) {
      console.log(userinfo)
      /*  const { data: res } = await this.$http.put(
        `users/${userinfo.id}/state/${userinfo.mg_state}`
      ) */
      const { data: res } = await getUserStateChangedData(userinfo.id, userinfo.mg_state)
      if (res.meta.status != 200) {
        userinfo.mg_state = !userinfo.mg_state
        return this.$message.error('更新用户状态失败')
      }
      this.$message.success('更新用户状态成功')
    }
  }
}
</script>
<style lang="less" scoped></style>
